<template>
	<view style="min-height: 100vh;">
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 font-bold common-title">{{ lang_message.systemMessage }}</view>
			</view>
		</view>

		<!-- 列表 -->
		<mescroll-body height="calc(100vh - 98rpx - var(--status-bar-height))" ref="mescrollRef"
			@init="mescrollInit" @down="downCallback" @up="upCallback">
			<view style="padding: 20rpx 20rpx 30rpx;">
				<view v-for="(item, index) in dataList" :key="index" class="card-box u-m-b-20">
					<view class="flex-center-between">
						<view class="flex-center">
							<image :src="dealType(item.type).icon" class="clear-flex"
								style="width: 34rpx; height: 34rpx;">
							</image>
							<view class="u-m-l-18 u-f-32 u-lh-44 font-medio">
								{{ item.title || '' }}
								<!-- {{ lang_message[dealType(item.type).labelKey] }} -->
							</view>
						</view>

						<view class="u-f-24 u-lh-34 color-grew">{{ dayjs(item.createTime || dayjs()).format('YYYY-MM-DD HH:mm') }}</view>
					</view>

					<view class="u-m-t-4 flex-center u-f-28 u-lh-40 color-grew">
						<!-- {{ dealTips(item.type) }} -->
						{{ item.content || '' }}
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		notifyPage
	} from '@/api/base.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {

			let types = [{
					label: '充值到账',
					labelKey: 'rechargeAccount',
					tips: '您充值的￥600余额已到账'
				},
				{
					label: '积分兑换成功',
					labelKey: 'scoreExchangeSuccess',
					tips: '您通过余额兑换的6000积分已到账'
				},
				{
					label: '推广成功',
					labelKey: 'extensionSuccess',
					tips: '您成功邀请一位新人加入'
				},
				{
					label: '新增评论',
					labelKey: 'addComment',
					tips: '有人给你的笔记“我的一天”评论了'
				},
				{
					label: '秒杀活动即将开抢',
					labelKey: 'rushActiveBegin',
					tips: '商品“美甲”仅需￥0.5，等你来抢'
				}
			].map((item, index) => ({
				...item,
				icon: require(`@/static/image/message/system_icon${ index + 1 }.png`)
			}))
			return {
				types,
				dataList: []
			}
		},
		onLoad() {

		},
		methods: {
			dealType(type) {
				return this.types[type - 1]
			},
			dealTips(type) {
				let labelKey = this.dealType(type).labelKey
				let tipKey = labelKey + 'Tips';
				let message = this.lang_message || {}
				let tips = message[tipKey] || []
				let unitMoney = this.lang_unit.money || ''
				if (labelKey === 'rechargeAccount') {
					return tips[0] + unitMoney + 999 + tips[1]
				} else if (labelKey === 'scoreExchangeSuccess') {
					return tips[0] + 999 + tips[1]
				} else if (labelKey === 'extensionSuccess') {
					return tips[0]
				} else if (labelKey === 'addComment') {
					return tips[0] + 'xxxx1111' + tips[1]
				} else if (labelKey === 'rushActiveBegin') {
					return tips[0] + 'xxxxaaa11' + tips[1] + unitMoney + 887 + tips[2]
				}
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				notifyPage({
					pageNumber: page.num,
					pageSize: page.size,
					type: 1
				}).then(res => {
					node && node.mescroll.endSuccess(res.list.length);
					if (page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList = this.dataList.concat(res.list); //追加新数据
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		&-box {
			padding: 20rpx;
			background-color: #F9F9F9;
			border-radius: 14rpx;
		}
	}
</style>
